<template>
  <div class="myPerform-container">
      <div class="myPerform_card">
          <div class="perfrom_table">
              <span class="table_status">进行中</span>
              <h3>OA系统项目</h3>
              <span class="table_uname">张三  2021-05-21</span>
          </div>

          <div class="perfrom_tabs">
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClicktabs">
              <el-tab-pane label="任务" name="first">
                <taskList />
              </el-tab-pane>
              <el-tab-pane label="项目文件" name="second">项目文件</el-tab-pane>
            </el-tabs>
          </div>
      </div>
  </div>
</template>

<script>
import taskList from './TaskList.vue'
export default {
  name: 'myPerform',
  components: {
    taskList
  },
  data() {
    return {
      activeName2: 'first'
    }
  },
  mounted() {
    
  },
  methods: {
    handleClicktabs () {
      
    }
  }
}
</script>
<style scoped lang="scss">
  .myPerform_card{
    width: 100%;
  }

  .perfrom_table{
    display: flex;
    align-items: center;
      .table_status{
        display: block;
        width: 60px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        color: #ffffff;
        background-color: rgb(0, 255, 76);
        border-radius: 20px;
      }
      h3{margin-left: 20px;}
      .table_uname{margin-left: 20px; font-size: 13px; color: rgba(124, 124, 124, 0.8);}
  }

</style>